<template>
  <div class="login-box">
    <el-form ref="form" :model="form" label-width="80px" :rules="rules">
      <h3>欢迎登录</h3>
      <el-form-item label="用户名" prop="name">
        <el-input v-model="form.name" placeholder="请输入用户名"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
      </el-form-item>

      <el-form-item label="验证码" prop="code">
        <el-input v-model="form.code" placeholder="请输入验证码"></el-input>
        <img :src="captcha" alt="验证码" @click="changeCaptcha">
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="login('form')">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Qs from 'qs'

export default {
  name: 'Login',
  data() {
    return {
      captcha: 'http://localhost:9090/captcha',
      // 表单数据
      form: {
        name: '',  // 用户名
        password: '',  // 密码
        code: '', // 验证码
      },
      // 验证规则
      rules: {
        name: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
        ],
        code: [
          {required: true, message: '请输入验证码', trigger: 'blur'}
        ]
      }
    }
  },
  methods:{
    // 点击图片时更新验证码图片
    changeCaptcha:function () {
      this.captcha = 'http://localhost:9090/captcha?v=' + Date.now();
    },
    login(formName){
      // 回调函数中的valid参数 表示校验结果
      this.$refs[formName].validate((valid)=>{
        let vm = this;
        // 判断表单校验结果
        if(valid){
          // 校验通过发送axios请求
          this.axios({
            url:'http://localhost:9090/loginJson',
            method:'post',
            // data是后端传递的参数
            data:{
              name:vm.form.name,
              password:vm.form.password,
              code:vm.form.code
            },
            transformRequest:[function(data){
              return Qs.stringify(data)
            }],
          }).then(function (resp) {
            // 登录成功，要向vuex中存放user对象
            // JSON.parse 传入json格式的字串 转换为json对象
            // let json = JSON.parse(resp.data);
            if(resp.data.code == 0){
              // 说明登录成功,路由到首页
              // vm.$message.success('登录成功');
              vm.$message({
                message:resp.data.msg,
                type:'success'
              });
              // 把用户信息放入store中,然后就可以在其他组件中获取用户信息了
              vm.$store.commit('updateUser',resp.data.data);
              setTimeout(function () {
                vm.$router.push("/Home")
              },1000);
            }else{
              vm.$message({
                message:resp.data.msg,
                type:'error'
              });
            }
          })
        } else {
          // 校验失效
          this.$message.error('格式输入有误');
          return false;
        }
      });
    }
  }
}
</script>

<style scoped>
.login-box{
  width:500px;
  height:400px;
  border:1px solid pink;
  margin:  150px auto;
  padding: 20px 50px 20px 30px;
  border-radius: 20px;
  box-shadow: 0px 0px 20px #6c69a6;
}
</style>
